<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>酷狗听歌排位</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="jq.project.css" />
	</head>

	<body>
		<div class="loadingBar">
			<img src="jq.image/star.png" class="star" />
			<img src="jq.image/protagonist.png" class="protagonist" />
			<img src="jq.image/earth.png" class="earch" />
			<img src="jq.image/pleaseWearEar.png" class="pleaseWearEar" />
			<img src="jq.image/arrow.png" class="arrow" />
			<p class="loading">Loading<span class="loadingNumber"></span></p>
		</div>
		<span class='times'></span>
		<div id="tip">请先听两秒</div>
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="preload.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//开始页面渲染
			function staring() {
				$(".loadingBar").html("<img src='jq.image/index_bg.jpg' class='user_bg'/><img src='jq.image/index_625secguess.png' class='index_520'/><img src='jq.image/mouth.png' class='mouth'/><img src='jq.image/whatSong.png' class='whatSong'/><img src='jq.image/man_left.png' class='man_left'/><img src='jq.image/man_right.png' class='man_right'/><img src='jq.image/index_start.png'  class='index_start' onclick='times()'/><img src='jq.image/sixQuery.png' class='sixQuery'> <img src='jq.image/what.png' class='what_1'/><img src='jq.image/what.png' class='what_2'/><img src='jq.image/what.png' class='what_3'/><img src='jq.image/what.png' class='what_4'/><img src='jq.image/KuGouLog.png'  class='kugou'/>")
				$(".loadingBar").css({
					"background-color": "white"
				})

			}
			let Ssongs=0;   //歌曲下标
			let count = 0; //猜中歌曲数量

			//第一个答题页面渲染
			function second() {
				$(".loadingBar").html("<img src='jq.image/user_bg.png' class='user_bg1' /><img src='jq.image/movieHitSongpeople.png'  class='movieHitSongpeople'/><img src='jq.image/movieHitSong.png'   class='movieHitSong'/><img src='jq.image/movieHitSongCityWall.png' class='movieHitSongCityWall'/><img src='jq.image/selectA.png' class='selectA answer' /><img src='jq.image/selectB.png'  class='selectB answer'/><img src='jq.image/selectC.png' class='selectC answer' /><img src='jq.image/smallMouth.png' class='smallMouth' /><span class='song1 answer' ></span><span class='song2 answer' ></span><span class='song3 answer' ></span><audio src='songs_1' class='audio' autoplay='autoplay' loop='loop'></audio>")
//				var Ssongs = Math.floor(Math.random() * 52); //随机一首歌的序号
				$(".song1").text(songs[Ssongs].item[0]) //随机出来的歌的选项歌名
				$(".song2").text(songs[Ssongs].item[1])
				$(".song3").text(songs[Ssongs].item[2])
				$("audio").attr("src", songs[Ssongs].audio) //将随机出来的歌的src插入audio的src
				setTimeout(function() {
					$(".answer").off("click", JG)
					$(".answer").on("click", function() { //点击答案选项执行
						var answer_1 = document.querySelectorAll(".answer")
						console.log(songs[Ssongs].answer)
						console.log(event.target)
						console.log(answer_1[songs[Ssongs].answer])

						//点击答案选项判断是否正确
						if(answer_1[songs[Ssongs].answer] == event.target || answer_1[(songs[Ssongs].answer) + 3] == event.target) {
							count++;
							Ssongs++;
							third();							
							console.log("下标",Ssongs)
						
						} else {
							Ssongs++;
							console.log("下标",Ssongs)
							third();
						}

					})
				}, 3000)

				$(".answer").one("click", JG)

				function JG() {
					$("#tip").fadeIn("slow");
					$("#tip").fadeOut("slow")
				}
			}

			//第二个答题页面渲染
			function third() {

				$(".loadingBar").html("<img src='jq.image/index_bg.jpg' class='user_bg'/><img src='jq.image/lightearth.png'  class='lightearth'/><img src='jq.image/threeYao.png' class='threeYao'/><img src='jq.image/car.png' class='car' /><img src='jq.image/hua.png' class='flower'/><img src='jq.image/selectA.png' class='selectA answer' /><img src='jq.image/selectB.png'class='selectB answer'/><img src='jq.image/selectC.png' class='selectC answer' /><img src='jq.image/smallMouth.png' class='smallMouth' /><span class='song1 answer' ></span><span class='song2 answer' ></span><span class='song3 answer' ></span><audio src='songs_1' class='audio' autoplay='autoplay' loop='loop'></audio>")
//				var Ssongs = Math.floor(Math.random() * 52); //随机一首歌的序号
				$(".song1").text(songs[Ssongs].item[0]) //随机出来的歌的选项歌名
				$(".song2").text(songs[Ssongs].item[1])
				$(".song3").text(songs[Ssongs].item[2])
				$("audio").attr("src", songs[Ssongs].audio) //将随机出来的歌的src插入audio的src
				setTimeout(function() {
					$(".answer").off("click", JG)
					$(".answer").on("click", function() { //点击答案选项执行
						var answer_1 = document.querySelectorAll(".answer")
						console.log(songs[Ssongs].answer)
						console.log(event.target)
						console.log(answer_1[songs[Ssongs].answer])

						//点击答案选项判断是否正确
						if(answer_1[songs[Ssongs].answer] == event.target || answer_1[(songs[Ssongs].answer) + 3] == event.target) {
							count++;
							Ssongs++;
							fourth();
							
							console.log("下标",Ssongs)
						
						} else {
							Ssongs++;
							console.log("下标",Ssongs)
							fourth();
						}

					})
				}, 3000)

				$(".answer").one("click", JG)

				function JG() {
					$("#tip").fadeIn("slow");
					$("#tip").fadeOut("slow")
				}
			}

			//			第三个答题页面渲染
			function fourth() {
				$(".loadingBar").html("<img src='jq.image/index_bg.jpg' class='user_bg'/><img src='jq.image/lightearth.png' class='lightearth_2' /><img src='jq.image/oldman.png' class='oldman' /><img src='jq.image/juhualeft.png' class='yellowFlower_left'/><img src='jq.image/juhuaright.png' class='yellowFlower_right'/><img src='jq.image/selectA.png' class='selectA answer'/><img src='jq.image/selectB.png'  class='selectB answer'/><img src='jq.image/selectC.png' class='selectC answer' /><img src='jq.image/smallMouth.png' class='smallMouth' /><span class='song1 answer' ></span><span class='song2 answer' ></span><span class='song3 answer' ></span><audio src='songs_1' class='audio' autoplay='autoplay' loop='loop'></audio>")
//				var Ssongs = Math.floor(Math.random() * 52); //随机一首歌的序号
				$(".song1").text(songs[Ssongs].item[0]) //随机出来的歌的选项歌名
				$(".song2").text(songs[Ssongs].item[1])
				$(".song3").text(songs[Ssongs].item[2])
				$("audio").attr("src", songs[Ssongs].audio) //将随机出来的歌的src插入audio的src
				setTimeout(function() {
					$(".answer").off("click", JG)
					$(".answer").on("click", function() { //点击答案选项执行
						var answer_1 = document.querySelectorAll(".answer")
						console.log(songs[Ssongs].answer)
						console.log(event.target)
						console.log(answer_1[songs[Ssongs].answer])

						//点击答案选项判断是否正确
						if(answer_1[songs[Ssongs].answer] == event.target || answer_1[(songs[Ssongs].answer) + 3] == event.target) {
							count++;
							Ssongs++;
							fifth();
							console.log("下标",Ssongs)
						
						} else {
							Ssongs++;
							console.log("下标",Ssongs)
							fifth();
						}

					})
				}, 3000)

				$(".answer").one("click", JG)

				function JG() {
					$("#tip").fadeIn("slow");
					$("#tip").fadeOut("slow")
				}
			}

			//		第四个答题页面渲染
			function fifth() {
				$(".loadingBar").html("<img src='jq.image/manwoman_bg.png' class='user_bg1'/><img src='jq.image/wogeiyou.png' class='wogeini'/><img src='jq.image/man.png' class='man'/><img src='jq.image/wuman.png' class='wuman'/><img src='jq.image/selectA.png' class='selectA answer' /><img src='jq.image/selectB.png'  class='selectB answer '/><img src='jq.image/selectC.png' class='selectC answer' /><img src='jq.image/smallMouth.png' class='smallMouth' /><span class='song1 answer' ></span><span class='song2 answer' ></span><span class='song3 answer' ></span><audio src='songs_1' class='audio' autoplay='autoplay' loop='loop'></audio>")
				$(".song1").text(songs[Ssongs].item[0]) //随机出来的歌的选项歌名
				$(".song2").text(songs[Ssongs].item[1])
				$(".song3").text(songs[Ssongs].item[2])
				$("audio").attr("src", songs[Ssongs].audio) //将随机出来的歌的src插入audio的src
				setTimeout(function() {
					$(".answer").off("click", JG)
					$(".answer").on("click", function() { //点击答案选项执行
						var answer_1 = document.querySelectorAll(".answer")
						console.log(songs[Ssongs].answer)
						console.log(event.target)
						console.log(answer_1[songs[Ssongs].answer])

						//点击答案选项判断是否正确
						if(answer_1[songs[Ssongs].answer] == event.target || answer_1[(songs[Ssongs].answer) + 3] == event.target) {
							count++;
							Ssongs++;
							sixth();
							
							console.log("下标",Ssongs)
					
						} else {
							Ssongs++;
							console.log("下标",Ssongs)
							sixth();
						}

					})
				}, 3000)

				$(".answer").one("click", JG)

				function JG() {
					$("#tip").fadeIn("slow");
					$("#tip").fadeOut("slow")
				}
			}
			//	第五个答题页面渲染
			function sixth() {
				$(".loadingBar").html("<img src='jq.image/index_bg.jpg' class='user_bg'/><img src='jq.image/lightearth.png' class='lightearth_3'/><img src='jq.image/audienceLeft.png' class='audienceLeft'/><img src='jq.image/audienceRight.png' class='audienceRight'/><img src='jq.image/stage.png' class='stage'/><img src='jq.image/songer.png' class='songer'/><img src='jq.image/wow.png' class='wow_1'/><img src='jq.image/wow2.png' class='wow_2'/><img src='jq.image/selectA.png' class='selectA answer' /><img src='jq.image/selectB.png'  class='selectB answer'/><img src='jq.image/selectC.png' class='selectC answer' /><img src='jq.image/smallMouth.png' class='smallMouth' /><span class='song1 answer' ></span><span class='song2 answer' ></span><span class='song3 answer' ></span><audio src='songs_1' class='audio' autoplay='autoplay' loop='loop'></audio>")
				$(".song1").text(songs[Ssongs].item[0]) //随机出来的歌的选项歌名
				$(".song2").text(songs[Ssongs].item[1])
				$(".song3").text(songs[Ssongs].item[2])
				$("audio").attr("src", songs[Ssongs].audio) //将随机出来的歌的src插入audio的src
				setTimeout(function() {
					$(".answer").off("click", JG)
					$(".answer").on("click", function() { //点击答案选项执行
						var answer_1 = document.querySelectorAll(".answer")
						console.log(songs[Ssongs].answer)
						console.log(event.target)
						console.log(answer_1[songs[Ssongs].answer])

						//点击答案选项判断是否正确
						if(answer_1[songs[Ssongs].answer] == event.target || answer_1[(songs[Ssongs].answer) + 3] == event.target) {
							count++;
							Ssongs++;
							seventh()
							
							console.log("下标",Ssongs)
						} else {
							Ssongs++;
							console.log("下标",Ssongs)
							seventh()
						}

					})
				}, 3000)

				$(".answer").one("click", JG)

				function JG() {
					$("#tip").fadeIn("slow");
					$("#tip").fadeOut("slow")
				}
			}

			//			第六个答题页面渲染
			function seventh() {
				$(".loadingBar").html("<img src='jq.image/index_bg.jpg' class='user_bg'/><img src='jq.image/lightearth.png' class='lightearth_3'/><img src='jq.image/watchpeos.png' class='watchpeos'/><img src='jq.image/WCwalls.png' class='WCwalls'/><img src='jq.image/jianfeizaode.png' class='jianfeizaode'/><img src='jq.image/feiZhao.png' class='feiZhao'/><img src='jq.image/selectA.png' class='selectA answer' /><img src='jq.image/selectB.png'  class='selectB answer'/><img src='jq.image/selectC.png' class='selectC answer' /><img src='jq.image/smallMouth.png' class='smallMouth' /><span class='song1 answer' ></span><span class='song2 answer'></span><span class='song3 answer' ></span><audio src='songs_1' class='audio' autoplay='autoplay' loop='loop'></audio>")
				$(".song1").text(songs[Ssongs].item[0]) //随机出来的歌的选项歌名
				$(".song2").text(songs[Ssongs].item[1])
				$(".song3").text(songs[Ssongs].item[2])
				$("audio").attr("src", songs[Ssongs].audio) //将随机出来的歌的src插入audio的src
				setTimeout(function() {
					$(".answer").off("click", JG)
					$(".answer").on("click", function() { //点击答案选项执行
						var answer_1 = document.querySelectorAll(".answer")
						console.log(songs[Ssongs].answer)
						console.log(event.target)
						console.log(answer_1[songs[Ssongs].answer])

						//点击答案选项判断是否正确
						if(answer_1[songs[Ssongs].answer] == event.target || answer_1[(songs[Ssongs].answer) + 3] == event.target) {
							count++;
							Ssongs++;
							second()
							if (Ssongs == 52) {
								Ssongs =0;
							}
							console.log("下标",Ssongs)
						} else {
							Ssongs++;
							console.log("下标",Ssongs)
							if (Ssongs == 52) {
								Ssongs =0;
							}
							second()
						}

					})
				}, 3000)

				$(".answer").one("click", JG)

				function JG() {
					$("#tip").fadeIn("slow");
					$("#tip").fadeOut("slow")
				}
			}
			//  总结的页面渲染
			function eighth() {
				$(".loadingBar").html("<img src='jq.image/user_bg.png' class='user_bg1'/><img src='jq.image/userint.png' class='userint'/><img src='jq.image/touxinag.png' class='touxiang'/><img src='jq.image/KuGouLog.png' class='kugou_2'/><img src='jq.image/huangjing.png' class='huangjing'/><img src='jq.image/info.png' class='info'/><img src='jq.image/text.png' class='text'/><img src='jq.image/buttonleft.png' class='buttonLeft' onclick='staring()'/><img src='jq.image/buttonright.png' class='buttonRight' onclick='share()'/><img src='jq.image/paiming_title.png' class='paiming_title'/><img src='jq.image/paiming_bg.png' class='paiming'/><img src='jq.image/huangjing.png' class='huangjing_2'/><span class='guess_count'>猜中<span></span>首</span><span class='text_title'>黄金</span><span class='buttonleft_titile' onclick='staring()'>再次挑战</span><span class='buttonright_title' onclick='share()'>分享朋友圈</span>")
				$(".guess_count").find("span").text(count)
				count = 0; //重新初始化猜对的歌曲数
			}

			//分享页面渲染
			function share() {
				$(".loadingBar").append("<img src='jq.image/yd.png' class='share'/><div class='bg'></div>")

				//点击图片或背景均能回到总结界面，移除share处的DOM操作
				$(".bg").on("click", function() {
					$(".loadingBar").find(".share").remove()
					$(".loadingBar").find(".bg").remove()
				})
				$(".share").on("click", function() {
					$(".loadingBar").find(".share").remove()
					$(".loadingBar").find(".bg").remove()
				})
			}

			//答题倒计时
			function times() {
				second(); //先渲染第一个答题页面
				var t1 = 30; //答题起始时间
				$(".times").css({
					"display": "block"
				})
				$(".times").css({
					"color": "back"
				}) //若再次开始游戏后将倒数时间重新变回黑色
				$(".times").html(t1 + "s")
				var t2 = setInterval(function() { //倒计时定时器	
					t1 -= 1
					if(t1 == -1) { //若倒数到0下次倒数为-1时，清除该定时器并且隐藏该定时器并跳转到总结页面
						clearInterval(t2);
						eighth();
						$(".times").css({
							"display": "none"
						})
						return;
					}
					$(".times").html(t1 + "s")
					if(t1 < 10) { //若小与10秒时，倒计时显示为红色
						$(".times").html("0" + t1 + "s")
						$(".times").css({
							"color": "red"
						})
					}
				}, 1000)
			}

			//创建对象
			var queue = new createjs.LoadQueue();

			//监听进度
			queue.on("progress", function(e) {

				var percent = parseInt(e.progress * 100) + "%";

				$(".loadingNumber").html(percent);
				console.log(percent);
			}, this)

			//监听完成
			queue.on("complete", function() {
				console.log("complete")
				staring()
			}, this)

			//promise 异步请求图片
			function loadPicture() {
				return new Promise(function(reslove) {
					$.ajax({
						type: "get",
						url: "FeHelper-20181206103900.json",
						async: true,
						success: function(res) {
							reslove(res);
						},
						error: function(err) {
							console.log("拿不到")
						},
					});
				})
			}
		
			//promise 异步请求音频
			function loadMusic() {
				return new Promise(function(reslove) {
					$.ajax({
						type: "get",
						url: "FeHelper-20181206115402.json",
						async: true,
						success: function(yes) {
							songs = yes; //函数内部声明一个全局变量songs
							reslove(yes)
						},
						error: function(err) {
							console.log(err)
						}
					});
				})
			}

			//先加载完图片、音频后再执行then步骤
			Promise.all([loadPicture(), loadMusic()]).then(function(res) {
				var pic = res[0],
					music = res[1];
					shuffle(music);				
				function shuffle(music) {				//随机歌曲
					let i = music.length;
					while(i) {
						let j = Math.floor(Math.random() * i--);
						[music[j], music[i]] = [music[i], music[j]];						
					}
				}
				let arr = []; //保存两个数组的容器
				$.each(pic, function(index, item) {
					arr.push(item) //遍历出来并push到新容器
				});
				$.each(music, function(index, item) {
					console.log(item)
					arr.push(item.audio) //遍历出来并push到新容器
				});
				console.log(arr)
				queue.loadManifest(arr) //待加载的资源
			})

			document.body.style.height = window.innerHeight + "px";
			/*动态改变根元素字体大小*/
			function recalc() {
				//获取客户端高度
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				// 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
				//40随便设置  但最好不要太小
			}

			function initRecalc() {
				recalc();
				// if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
		</script>
	</body>

</html>